<template>
    <!-- 设备异常上报 -->
    <el-container class="container">
        <!-- 头部导航 -->
        <el-header class="header">
            <el-header class="headerSon">
                <div>
                    <el-icon>
                        <Fold />
                    </el-icon>
                    <span>设备管理</span>
                </div>
                <div>
                    <img :src="userPhoto" alt="">
                    <span>{{ userName }}</span>
                </div>
            </el-header>
        </el-header>
        <!-- 底部内容 -->
        <el-container class="content">
            <el-header>
                <!-- 搜索 -->
                <div>
                     <el-input placeholder="请输入设备编号" style="height: 25px !important;" v-model="code">
                    </el-input>
                    <el-input placeholder="请输入姓名" style="height: 25px !important;" v-model="name">
                    </el-input>
                    <div class="time">
                        <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" :prefix-icon="Calendar" style="width: 320px" />
                    </div>
                    <el-button type="primary" @click="search">搜索</el-button>
                </div>
                <!-- 刷新 -->
                <div class="info">
                    <el-button type="info" @click="goInfo"><el-icon><Refresh /></el-icon>刷新</el-button>
                </div>
            </el-header>
            <el-footer>
                <el-table :data="ReportList" border style="width: 100%">
                    <el-table-column label="姓名" prop="realname" ></el-table-column>
                    <el-table-column label="手机号" prop="phone" ></el-table-column>
                    <el-table-column label="设备编号" prop="code" ></el-table-column>
                    <el-table-column label="设备地点" prop="address" ></el-table-column>
                    <el-table-column label="重量/kg" prop="weight" ></el-table-column>
                    <el-table-column label="清运时间" prop="removalTime" ></el-table-column>
                </el-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pageIndex"
                    :page-sizes="[5,7]"
                    :page-size=pageSize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total
                    class="pagination"
                    :pager-count="5"
                    background 
                    />
            </el-footer>
        </el-container>   
    </el-container>
</template>

<script setup>
import { Calendar, Fold, Refresh } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { CleanList } from '@/components/Device/Device';
import  Dayjs from 'dayjs';
onMounted(() => {
    //页面已加载就调数据设备管理的接口
    ReportFun()
})
let code = ref("")//设备编号
let name = ref("")//姓名
let date=ref()
let userPhoto = ref("")//用户头像
let userName = ref("用户")//用户名/手机号
let total=ref(0)
let pageSize=ref(1)
let pageIndex=ref(1)
let handleCurrentChange=(newPage)=>{
    pageIndex.value = newPage;
    ReportFun(); // 重新获取数据
}
let handleSizeChange=(newPage)=>{
    pageSize.value = newPage;
    ReportFun(); // 重新获取数据
}
let search=()=>{
    let data1={
        pageIndex:pageIndex.value,
        pageSize:pageSize.value,
        code:code.value,
        name:name.value,
        startTime:date.value ? Dayjs(date.value[0]).format('YYYY-MM-DD HH:mm:ss') : undefined,
        endTime: date.value ? Dayjs(date.value[1]).format('YYYY-MM-DD HH:mm:ss') : undefined
    }
    CleanList(data1).then(res=>{
        // console.log(res);
        if(res.code==200){
            // console.log(res.dataset.dataset.List);
            ReportList.value=res.dataset.dataset.List
        }
    })
}

let ReportFun = () => {//调数据设备管理的接口
    let data={
        pageIndex:pageIndex.value,
        pageSize:pageSize.value,
    }
    CleanList(data).then(res=>{
        // console.log(res);
        if(res.code==200){
            // console.log(res.dataset.dataset.List);
            ReportList.value = res.dataset.dataset.List || [];
            total.value=res.dataset.dataset.totalSize
        }
    })
}
//调搜索框里面数据的接口
let ReportList = ref([//数据设备管理的Table里面的数据
    {},
])
let goInfo = () => {//点击刷新
    ReportFun()
}
</script>

<style lang="less" scoped>
.time {
    display: inline-block;
    margin-right: 20px;
    :deep(.el-range-editor) {
        width: 285px !important;
        height: 25px;

        .el-range-input {
            font-size: 12px;
            height: 25px;
        }

        .el-range-separator {
            font-size: 12px;
        }
    }
}

.container {
    width: 100%;
    height: 100%;

    .header {
        background: #fff;
        height: 80px;
        padding: 0;
        border-bottom: 1px solid #ccc;
        box-shadow: 0px 1px 2px 0px #ccc;

        .headerSon {
            height: 45px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            justify-content: space-between;

            div {
                display: flex;
                align-items: center;

                span {
                    display: inline-block;
                    padding: 0px 10px;
                    font-size: 13px;
                }
            }
        }
    }

    .content {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;

        .el-header {
            width: 100%;
            --el-header-padding: 0;

            .el-input {
                width: 185px;
                margin-right: 25px;

                :deep(.el-input__wrapper) {
                    min-height: 25px;

                    span {
                        font-size: 12px;
                    }

                    .el-input__placeholder {
                        transform: translateY(-53%);
                    }
                }
            }

            .el-button {
                height: 25px;
                font-size: 12px;
                padding: 4px 10px;
            }

            .info {
                margin-top: 10px;
                display: flex;
                justify-content: end;

                .el-button {
                    width: 60px;
                }
            }
        }

        .el-footer {
            --el-footer-padding: 0;
            margin-top: 5px;

            .el-table {
                :deep(.cell) {
                    font-size: 12px;
                    padding: 0 6px;
                }

                .el-button {
                    height: 23px;
                    font-size: 12px;
                    padding: 2px 10px;
                }

                :deep(.el-table__cell) {
                    padding: 3px 0;
                }
            }
        }
    }
}

:deep(.el-dialog__header) {
    display: inline-block;
}

:deep(.dialogOne) {
    color: #363638;
    border-radius: 2px;
    --el-dialog-margin-top: 6vh;

    .el-container {
        width: 100%;
        font-size: 12px;

        .box {
            width: 100%;
            font-size: 12px;

            .el-row {
                width: 100%;

                .el-form-item {
                    width: 50%;

                    .el-form-item__label {
                        font-weight: 600;
                        font-size: 12px;
                    }

                    .el-input__wrapper {
                        height: 25px;
                    }

                    .el-input__wrapper {
                        min-height: 25px;
                        width: 69%;
                    }

                    .el-input {
                        width: 70%;
                    }

                    .el-textarea__inner {
                        width: 100%;
                    }

                    .el-textarea__inner {
                        width: 86%;
                    }
                }

                .note {
                    width: 100%;

                    .el-input__wrapper {
                        width: 86%;
                    }
                }
            }

            .close {
                width: 100%;
                display: flex;
                justify-content: end;

                .el-button {
                    padding: 2px 10px;
                    font-size: 12px;
                }
            }
        }
    }
}

:deep(.dialogTwo) {
    .el-form-item__content {
        width: 100px;

        .el-input__inner {
            font-size: 12px;
        }
    }

    .el-radio__label {
        font-size: 12px;
    }

    .el-input {
        width: 100%;

        .el-input__wrapper {
            width: 100% !important;

            span {
                font-size: 12px;
            }
        }
    }
}
</style>